<template>
  <div id="TreeChart">
    <table v-if="treeData.title" style="margin: 0 auto">
      <tr>
        <td
          :colspan="
            Array.isArray(treeData.children) ? treeData.children.length * 2 : 1
          "
          :class="{
            parentLevel:
              Array.isArray(treeData.children) && treeData.children.length,
            extend:
              Array.isArray(treeData.children) &&
              treeData.children.length &&
              treeData.extend,
          }"
        >
          <div :class="{ node: true, hasMate: treeData.mate }">
       
              <div
             
                class="person"
                :class="Array.isArray(treeData.class) ? treeData.class : []"
                :projectid="projectid"
                style=" position: relative;"
                @roload="$emit('roload')"
                @click="$emit('click-node',treeData)"
              >
           
           
         
               
                <div class="name" :title="treeData.title">
                  {{ treeData.title }}
                  <!--  v-if="showDeal(treeData)"  -->
              <span v-if="isEdit">
                  <Icon type="ios-create-outline"   @click="edit(treeData)"></Icon >
                    <Icon type="ios-trash-outline" @click="deleteData(treeData)"></Icon >
                    <Icon type="ios-git-merge"  v-if="treeData.level<3" @click="addData(treeData)"></Icon >
                </span>
                </div>
      
              </div>
        
        
            <template
              v-if="Array.isArray(treeData.mate) && treeData.mate.length"
            >
              <div
                class="person"
                v-for="(mate, mateIndex) in treeData.mate"
                :key="treeData.name + mateIndex"
                :class="Array.isArray(mate.class) ? mate.class : []"
             
              >
                <div class="avat">
                  {{ mate.taskStatus }}
                </div>
                <div class="name">{{ mate.name }}</div>
                <div class="time">{{ mate.dealTime }}</div>
              </div>
            </template>
          </div>
          <div
            class="extend_handle"
            v-if="Array.isArray(treeData.children) && treeData.children.length"
            @click="toggleExtend(treeData)"
          ></div>
        </td>
      </tr>
      <tr
        v-if="
          Array.isArray(treeData.children) &&
          treeData.children.length &&
          treeData.extend
        "
      >
        <td
          v-for="(children, index) in treeData.children"
          :key="index"
          colspan="2"
          class="childLevel"
        >
     
          <TreeChart
            :json="children"
            :isEdit="isEdit"
            
            @roload="$emit('roload')"
            :projectid="projectid"
            @click-node="$emit('click-node', $event)"
          />
        </td>
      </tr>
    </table>
 
    <Drawer v-model="modal13" :closable="false" :title="title"  >
      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="名称" prop="title">
            <Input v-model="formValidate.title" placeholder="请输入"></Input>
        </FormItem>
        <FormItem >
          <Button type="primary" @click="handleSubmit('formValidate')" >确定</Button>
            <Button style="margin-left: 8px" @click="modal13=false">取消</Button>
        </FormItem>
    </Form>
    </Drawer>
  </div>
</template>

<script>
export default {
  name: "TreeChart",
  props: {
    json: {
      type: Object,
      default: () => {
        return {};
      },
    },
  
    projectid: {
                default: 0
            },
            isEdit: {
              type:Boolean,

                default: false
            },
  },
  data() {
    return {
      treeData: {},

      title:"新增",
      cData:{},
      modal13:false,
      formValidate: {
        title: '',
        id:""
      },
      ruleValidate: {
        title: [
                        { required: true, message: '请输入', trigger: 'blur' }
                    ]}
    };
  },
  watch: {
    json: {
      handler: function (Props) {
        let extendKey = function (jsonData) {
          jsonData.extend =
            jsonData.extend === void 0 ? true : !!jsonData.extend;
          if (Array.isArray(jsonData.children)) {
            jsonData.children.forEach((c) => {
              extendKey(c);
            });
          }
          return jsonData;
        };
        if (Props) {
          this.treeData = extendKey(Props);
        }
      },
      immediate: true,
    }
    
  },
  methods: {
    handleSubmit () {
                this.$refs.formValidate.validate((valid) => {
            
                    if (valid) {
                      let params = ''

                   
                      if(this.formValidate.id||this.formValidate.id===0){
                        params = '?projectid=' +this.projectid+'&title='+this.formValidate.title+"&id="+this.formValidate.id+"&pid="+this.formValidate.pid
                      }else{
                        params = '?projectid=' +this.projectid+'&title='+this.formValidate.title+"&pid="+this.cData.id
                      }
                  
               
                  
                      $A.apiAjax({
                      url: 'project/step/edit' +params,
                      
                      complete: () => {
                          
                      },
                      success: (res) => {
                        this.modal13 = false
                
                     
                            setTimeout(() => {
                                this.roload()
                      
                            }, 50);
                          
                      }
                  });
   
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            },
            handleReset () {
          
                this.$refs.formValidate.resetFields();
            },
    // 编辑
    edit(row){
      this.modal13 = true
      this.title = '编辑'
      this.formValidate =JSON.parse(JSON.stringify(row))  
      this.cData= row
    },
    // 新增
    addData(row){
      this.modal13 = true
      this.title = '新增'
      
      this.cData= row
      this .formValidate= {
        title: '',
        id:""
      }
      this.handleReset('formValidate')
    },
    roload(){

      this.$emit('roload')
    },
     // 删除
     deleteData(row){
      let that = this
      this.cData= row
      this.$Modal.confirm({
                    title: this.$L('删除'),
                    content: this.$L('你确定要删除吗？'),
                    loading: true,
                    onOk: () => {
                        $A.apiAjax({
                            url: 'project/step/del?id='+row.id,
                           
                            error: () => {
                                this.$Modal.remove();
                                alert(this.$L('网络繁忙，请稍后再试！'));
                            },
                            success: (res) => {
                              
                              setTimeout(() => {
                                this.roload()
                      
                            }, 50);
                              this.$Message.success('删除成功');
                              this.$Modal.remove();
                            }
                        });
                    }
                });
     },
    showDeal(treeData) {
      let status = false;
      if (
        treeData.taskStatus == 1 &&
        treeData.candidateGroups == treeData.userInfoId &&
        ( treeData.taskCode == "任务派发" || treeData.taskCode == "任务派发APP")
      ) {
        if (treeData.children.length) {
          treeData.children.forEach((element) => {
            if (element.taskStatus != 1) {
              status = true;
            }
          });
          if (status) {
            return true;
          } else {
            return false;
          }
        } else {
          return false;
        }
      } else {
        return false;
      }
    },
    toggleExtend: function (treeData) {
      treeData.extend = !treeData.extend;
      this.$forceUpdate();
    },
  },
};
</script>

<style scoped>
#TreeChart {
  overflow: auto;
}
table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
td {
  position: relative;
  vertical-align: top;
  padding: 0 0 50px 0;
  text-align: center;
}

.extend_handle {
  position: absolute;
  left: 50%;
  bottom: 30px;
  width: 10px;
  height: 10px;
  padding: 10px;
  transform: translate3d(-12.5px, 0, 0);
  cursor: pointer;
}
.extend_handle:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 2px solid;
  border-color: #ccc #ccc transparent transparent;
  transform: rotateZ(135deg);
  transform-origin: 50% 50% 0;
  transition: transform ease 300ms;
}
.extend_handle:hover:before {
  border-color: #333 #333 transparent transparent;
}
.extend .extend_handle:before {
  transform: rotateZ(-45deg);
}

.extend::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 15px;
  height: 15px;
  border-left: 2px solid #ccc;
  transform: translate3d(-1px, 0, 0);
}
.childLevel::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  height: 15px;
  border-left: 2px solid #ccc;
  transform: translate3d(-1px, 0, 0);
}
.childLevel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -15px;
  border-top: 2px solid #ccc;
}
.childLevel:first-child:before,
.childLevel:last-child:before {
  display: none;
}
.childLevel:first-child:after {
  left: 50%;
  height: 15px;
  border: 2px solid;
  border-color: #ccc transparent transparent #ccc;
  border-radius: 6px 0 0 0;
  transform: translate3d(1px, 0, 0);
}
.childLevel:last-child:after {
  right: 50%;
  height: 15px;
  border: 2px solid;
  border-color: #ccc #ccc transparent transparent;
  border-radius: 0 6px 0 0;
  transform: translate3d(-1px, 0, 0);
}
.childLevel:first-child.childLevel:last-child::after {
  left: auto;
  border-radius: 0;
  border-color: transparent #ccc transparent transparent;
  transform: translate3d(1px, 0, 0);
}

.node {
  position: relative;
  display: inline-block;
  margin: 0 1em;
  box-sizing: border-box;
  text-align: center;
  　　white-space: nowrap;
}
.node .person {
  position: relative;
  display: inline-block;
  z-index: 2;
  width: 9em;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 待处理 */
.node .person .avat {
  display: block;
  width: 4em;
  height: 4em;
  margin: auto;
  line-height: 4em;
  overflow: hidden;
  border: 2px solid #ccc;
  font-weight: 600;
  box-sizing: border-box;
}
.node .person .avat0 {
  color: #98a6be;

  /* background: #1280f1; */
  /* border: 1px solid #1280f1; */
  /* text-shadow:#1280f1 0px 0px 5px */
}
/* 已处理 */
.node .person .avat1 {
  color: #58c39a;
  /* background: #98A6BE; */
  /* border: 1px solid #98A6BE; */
  /* text-shadow:#98A6BE 0px 0px 5px */
}
/* 处理中 */
.node .person .avat02 {
  color: #518bff;
  /* background: #FF8000; */
  /* border: 1px solid #FF8000; */
  /* text-shadow:#FF8000 3px 4px 5px */
}
.node .person .name {
  /* height: 2em; */
  line-height: 2em;
  font-weight: 600;
  /* white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
display: inline-block; */
  /* width: 6em; */
}
.time {
  line-height: 2em;
  font-size: 10px;
  font-weight: 600;

  width: 100%;
}
.node.hasMate::after {
  content: "";
  position: absolute;
  left: 2em;
  right: 2em;
  top: 2em;
  border-top: 2px solid #ccc;
  z-index: 1;
}
/* 横板 */
.landscape {
  transform: translate(-100%, 0) rotate(-90deg);
  transform-origin: 100% 0;
}
.landscape .node {
  text-align: left;
  height: 8em;
  width: 8em;
}
.landscape .person {
  position: relative;
  transform: rotate(90deg);
  padding-left: 4.5em;
  height: 4em;
  top: 4em;
  left: -1em;
}
.landscape .person .avat {
  position: absolute;
  left: 0;
}
.landscape .person .name {
  height: 4em;
  line-height: 4em;
}
.landscape .hasMate {
  position: relative;
}
.landscape .hasMate .person {
  position: absolute;
}
.landscape .hasMate .person:first-child {
  left: auto;
  right: -4em;
}
.landscape .hasMate .person:last-child {
  left: -4em;
  margin-left: 0;
}
</style>
